<!DOCTYPE html>
<html lang="en-us">
	<head>
		<meta charset="utf-8">
		<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->

		<title> Tracker Club </title>
		<meta name="description" content="">
		<meta name="author" content="">
			
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<!-- Basic Styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" media="screen" href="css/font-awesome.min.css">

		<!-- SmartAdmin Styles : Please note (smartadmin-production.css) was created using LESS variables -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-production.css">
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-skins.css">

		<!-- SmartAdmin RTL Support is under construction
		<link rel="stylesheet" type="text/css" media="screen" href="css/smartadmin-rtl.css"> -->

		<!-- We recommend you use "your_style.css" to override SmartAdmin
		     specific styles this will also ensure you retrain your customization with each SmartAdmin update.
		<link rel="stylesheet" type="text/css" media="screen" href="css/your_style.css"> -->

		<!-- Demo purpose only: goes with demo.js, you can delete this css when designing your own WebApp
		<link rel="stylesheet" type="text/css" media="screen" href="css/demo.css">
		 -->
		<!-- GOOGLE FONT 
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700">
		-->
		
		<!-- CSS Personalizado -->
		<link rel="stylesheet" type="text/css" media="screen" href="css/trackerclub.css">
		
	</head>

<style>

.google_maps {
  width: 100%;
  height: 220px;
  position: relative;
}

body {
  overflow-y: scroll;
}
</style>	

	<body class="">
			<!-- <div id="map_canvas1" class="google_maps"></div> -->
			
			<!-- MAIN CONTENT -->
			<div id="content">
			
			<div class="alert title-info">
				<strong>Ranking</strong>
			</div>

		<table id="table-history" class="table table-bordered">
				<thead>
					<tr class="header">
						<th>#</th>
						<th>Km/h</th>
						<th>Modelo</th>
						<th>Nome</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>				
			<!-- 
			</br>

				<div align="center">
				
					<div id="dvCheckIn">				
					<button type="button" class="btn btn-labeled btn-primary" onclick="back();">
					 <span class="btn-label">
					 </>Voltar
					</button>
					</div>
					
	 			</div>		
 			-->					
			</div>
			<!-- END MAIN CONTENT -->

		</div>
		<!-- END MAIN PANEL -->


		<!--================================================== -->

		<!-- PACE LOADER - turn this on if you want ajax loading to show (caution: uses lots of memory on iDevices)
		<script data-pace-options='{ "restartOnRequestAfter": true }' src="js/plugin/pace/pace.min.js"></script>-->

		<!-- Link to Google CDN's jQuery + jQueryUI; fall back to local -->
		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
		<script>
			if (!window.jQuery) {
				document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>');
			}
		</script>

		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
		<script>
			if (!window.jQuery.ui) {
				document.write('<script src="js/libs/jquery-ui-1.10.3.min.js"><\/script>');
			}
		</script>

		<!-- JS TOUCH : include this plugin for mobile drag / drop touch events
		<script src="js/plugin/jquery-touch/jquery.ui.touch-punch.min.js"></script> -->

		<!-- BOOTSTRAP JS -->
		<script src="js/bootstrap/bootstrap.min.js"></script>

		<!-- CUSTOM NOTIFICATION -->
		<script src="js/notification/SmartNotification.min.js"></script>

		<!-- JARVIS WIDGETS -->
		<script src="js/smartwidgets/jarvis.widget.min.js"></script>

		<!-- EASY PIE CHARTS -->
		<script src="js/plugin/easy-pie-chart/jquery.easy-pie-chart.min.js"></script>

		<!-- SPARKLINES -->
		<script src="js/plugin/sparkline/jquery.sparkline.min.js"></script>

		<!-- JQUERY VALIDATE -->
		<script src="js/plugin/jquery-validate/jquery.validate.min.js"></script>

		<!-- JQUERY MASKED INPUT -->
		<script src="js/plugin/masked-input/jquery.maskedinput.min.js"></script>

		<!-- JQUERY SELECT2 INPUT -->
		<script src="js/plugin/select2/select2.min.js"></script>

		<!-- JQUERY UI + Bootstrap Slider -->
		<script src="js/plugin/bootstrap-slider/bootstrap-slider.min.js"></script>

		<!-- browser msie issue fix -->
		<script src="js/plugin/msie-fix/jquery.mb.browser.min.js"></script>

		<!-- FastClick: For mobile devices: you can disable this in app.js -->
		<script src="js/plugin/fastclick/fastclick.js"></script>

		<!--[if IE 7]>

		<h1>Your browser is out of date, please update your browser by going to www.microsoft.com/download</h1>

		<![endif]-->

		<!-- Demo purpose only -->
		<script src="js/demo.js"></script>

		<!-- MAIN APP JS FILE -->
		<script src="js/app.js"></script>
		
	</body>

						
						


<script type="text/javascript">

	function createRowContent(rowObject, cellType, data) {
		var cell = document.createElement(cellType);
		var textNode = document.createTextNode(data);
		cell.appendChild(textNode);
		rowObject.appendChild(cell);
	}

	function createTableData(row, data){
		createRowContent(row, "td", data);
	}

	function createTableHeader(row, data){
		createRowContent(row, "th", data);
	}	
	
	// DO NOT REMOVE : GLOBAL FUNCTIONS!
	pageSetUp();
	
	// PAGE RELATED SCRIPTS

	/*
	 * Google Maps Initialize
	 */
	var map;
	var myLatlng;
	var marker;
	 
	var latitude = -22.8828873;
	var longitude = -43.7312437;
	var accuracy;
	var provider;
	var address;

	function initialize() {
	
	    function generate_map_1() {

	    	myLatlng = new google.maps.LatLng(latitude, longitude);
	    	
	        var mapOptions = {
	            center: myLatlng,
	            zoom: 15,
	        };
	        map = new google.maps.Map(document.getElementById('map_canvas1'), mapOptions);
			/*
	        var marker = new google.maps.Marker({
	            position: myLatlng,
	            map: map,
	            title: 'Sua posição'
	        });
			*/        
	
	        // Setup skin for the map
	        map.mapTypes.set('greyscale_style', google.maps.MapTypeId.TERRAIN);
	        map.setMapTypeId('greyscale_style');
	
	    }
	
	
	    generate_map_1();
	}
	
	/*
	$(window).bind('gMapsLoaded', initialize);
	window.loadGoogleMaps();
	*/
	function clearMarkers() {
		try {
			 marker.setMap(null);
			 for (var i = 0; i < markers.length; i++) {
				 marker[i].setMap(null);
			 }
			
		} catch (e) {
	
			return;
			
		}
	}

	
	function centerAt(latitude, longitude) {
		try {
	
			clearMarkers();
			myLatlng = new google.maps.LatLng(latitude, longitude);
			
	        marker = new google.maps.Marker({
	            position: myLatlng,
	            map: map,
	            title: 'Sua posição'
	        });
	
	        marker.setMap(map);
	
	        map.panTo(myLatlng);
	        
	
		} catch (e) {

			return;
			
		}
        
	}       


	function setHistoryCheckInOut(jsonListObject)
	{
		try {

			var table = document.getElementById("table-history");
			var tbody = document.createElement("tbody"); 
			table.appendChild(tbody);

			var array  = jsonListObject;
			 for(i = 0; i < array.length; i++) {

				 var row = document.createElement("tr");
				 if (i % 2 == 0) {
					 	row.className  = "even";
					 } else {
						 row.className  = "odd";					 
					 }				 

				 createTableData(row, array[i].Position);
				 createTableData(row, array[i].Speed);
				 createTableData(row, array[i].Model);
				 createTableData(row, array[i].Name);
				 //createTableData(row, "+");

				 tbody.appendChild(row);
				 
			 }
			
		} catch (e) {
			AndroidNativeCode.showMessage("Error: (" + e.message + ")");
			return;
		}		
	}			

	
	AndroidNativeCode.getRanking();
</script>
	
</html>